<template>
  <div class="order-detail">
    <div class="header">
      <div class="left">订单详情</div>
      <img src="@/assets/img/fork.svg" class="right" @click="cancel" />
    </div>
    <div class="container">
      <div class="title">
        <div>收货信息</div>
        <div class="text" :style="{ color: orderDetail.processColor, 'text-align': 'end' }">
          {{ orderDetail.processName }}
        </div>
      </div>
      <div class="row">
        <div class="text">{{ orderDetail.baseOrderNo }}</div>
        <div class="text" v-if="orderDetail.flow === '1'">{{ orderDetail.supplierName }}</div>
        <div class="text" v-else>{{ orderDetail.customerName }}</div>
      </div>
      <div class="row">
        <div class="text">{{ orderDetail.departmentName }}</div>
        <div class="text">{{ orderDetail.number }}</div>
      </div>
      <div class="row" v-if="orderDetail.flow === '2'">
        <div class="text">{{ orderDetail.materialInfo[0]?.warehouseName }}</div>
        <div class="text">{{ orderDetail.materialInfo[0]?.materialName }}</div>
      </div>
      <div class="row">
        <div class="text">毛重({{ weightUnit }})：{{ saveWeightToShow(orderDetail.weightIn) }}</div>
        <div class="text">
          皮重({{ weightUnit }})：{{ saveWeightToShow(orderDetail.weightOut) }}
        </div>
      </div>
      <div class="row">
        <div class="text">
          净重({{ weightUnit }})：{{ saveWeightToShow(orderDetail.weightCargo) }}
        </div>
        <div class="text" v-if="orderDetail.flow === '1'">
          扣杂({{ weightUnit }})：{{ saveWeightToShow(orderDetail.inspectImpurity) }}
        </div>
      </div>
      <div class="row" v-if="orderDetail.flow === '1'">
        <div class="text">
          预估干基({{ weightUnit }})：{{ saveWeightToShow(orderDetail.weightPure) }}
        </div>
      </div>
      <div class="row">
        <div class="text">单价(含税)：{{ savePriceToShow(orderDetail.priceTaxOut) }}</div>
        <div class="text">总价(含税)：{{ orderDetail.totalAmountTaxOut }}</div>
      </div>
      <div class="row">
        <div class="text">作废人：{{ orderDetail.invaildName }}</div>
        <div class="text">作废时间：{{ orderDetail.invaildDate }}</div>
      </div>
    </div>

    <div class="container" v-if="orderDetail.flow === '1'">
      <div class="title">物料信息</div>
      <div v-for="item in orderDetail.materialInfo" :key="item.materialId">
        <div class="row">
          <div class="text">{{ item.warehouseName }}</div>
          <div class="text">{{ item.materialName }}</div>
        </div>
        <div class="row">
          <div class="text">预估干基({{ weightUnit }})：{{ saveWeightToShow(item.weight) }}</div>
          <div class="text">单价(含税)：{{ savePriceToShow(item.priceTaxOut) }}</div>
        </div>
        <div class="row">
          <div class="text">总价(含税)：{{ item.totalAmountTaxOut }}</div>
        </div>
      </div>
    </div>

    <div class="container" v-if="isYtj">
      <div class="title">流程信息</div>
      <div class="row">
        <div class="text">①初磅称重：{{ orderDetail.weightInName }}</div>
        <div class="text">{{ orderDetail.weightInDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.weightInPics"></ImageShow>
      </div>
      <template v-if="orderDetail.notWeightOut !== '1'">
        <template v-for="(item, index) in orderDetail.materialInfo" :key="item.materialId">
          <div class="row">
            <div class="text">②{{ numberToChinese(index + 2) }}磅称重：{{ item.createName }}</div>
            <div class="text">{{ item.createDate }}</div>
          </div>
          <div class="row">
            <ImageShow :keys="item.weightPics"></ImageShow>
          </div>
        </template>

        <!-- <div class="row" >
          <div class="text">③质检：{{ orderDetail.inspectName }}</div>
          <div class="text">{{ orderDetail.inspectDate }}</div>
        </div>
        <div class="row">
          <ImageShow :keys="orderDetail.inspectPics"></ImageShow>
        </div> -->
      </template>
    </div>

    <div class="container" v-else>
      <div class="title">流程信息</div>
      <div class="row">
        <div class="text">①入场检查：{{ orderDetail.createName }}</div>
        <div class="text">{{ orderDetail.createDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.checkInPics"></ImageShow>
      </div>
      <div class="row">
        <div class="text">②入场称重：{{ orderDetail.weightInName }}</div>
        <div class="text">{{ orderDetail.weightInDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.weightInPics"></ImageShow>
      </div>
      <div class="row" v-if="orderDetail.flow === '1'">
        <div class="text">③质检：{{ orderDetail.inspectName }}</div>
        <div class="text">{{ orderDetail.inspectDate }}</div>
      </div>
      <div class="row" v-else>
        <div class="text">③装货：{{ orderDetail.inspectName }}</div>
        <div class="text">{{ orderDetail.inspectDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.inspectPics"></ImageShow>
      </div>
      <div class="row">
        <div class="text">④出场称重：{{ orderDetail.weightOutName }}</div>
        <div class="text">{{ orderDetail.weightOutDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.weightOutPics"></ImageShow>
      </div>
      <div class="row">
        <div class="text">⑤出场检查：{{ orderDetail.checkOutName }}</div>
        <div class="text">{{ orderDetail.checkOutDate }}</div>
      </div>
      <div class="row">
        <ImageShow :keys="orderDetail.checkOutPics"></ImageShow>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api/index'
import { numberToChinese } from '@/libs/utils'
import { getCodeValueAndColor } from '@/libs/code'
import { getWeightUnit, saveWeightToShow, savePriceToShow } from '@/libs/unit'
import ImageShow from '@/components/ImageShow.vue'
const route = useRoute()
const router = useRouter()
const weightUnit = getWeightUnit()
let orderDetail = reactive({
  baseOrderNo: '',
  customerName: '',
  supplierName: '',
  departmentName: '',
  number: '',
  materialInfo: [],
  weightIn: '',
  weightOut: '',
  weightCargo: '',
  inspectImpurity: '',
  weightPure: '',
  priceTaxOut: '',
  totalAmountTaxOut: '',
  invaildName: '',
  invaildDate: '',
  processName: '',
  processColor: '',
  flow: '',
  createDate: '',
  checkInPics: '',
  createName: '',
  weightInDate: '',
  weightInPics: '',
  weightInName: '',
  inspectDate: '',
  inspectCommodityPics: '',
  inspectPics: '',
  inspectName: '',
  weightOutDate: '',
  weightOutPics: '',
  weightOutName: '',
  checkOutDate: '',
  checkOutPics: '',
  checkOutName: '',
  notWeightOut: ''
})
const isYtj = ref(false)
onMounted(async () => {
  const { data: item } = await api.baseOrderDetail({ id: route.query.id })
  isYtj.value = item.extend3 === 'ytj'

  if (item.totalAmountTaxOut === null) {
    orderDetail.totalAmountTaxOut = '-'
  }
  item.materialInfo.forEach((item) => {
    if (item.totalAmountTaxOut === null) {
      item.totalAmountTaxOut = '-'
    }
  })
  for (const key in orderDetail) {
    if (item[key] != null) {
      orderDetail[key] = item[key]
    }
  }
  // if (orderDetail.materialInfo && orderDetail.materialInfo.length > 1) {
  //   const mainIndex = orderDetail.materialInfo.findIndex((item) => {
  //     return item.isMainMaterial === '1'
  //   })
  //   const main = orderDetail.materialInfo[mainIndex]
  //   orderDetail.materialInfo.splice(mainIndex, 1)
  //   orderDetail.materialInfo.unshift(main)
  // }
  let code = '',
    value = ''
  if (item.marker === '6') {
    if (item.status !== '1') {
      code = 'BASE_ORDER_CONFIRM_STATUS'
      value = item.status
    } else {
      code = item.flow === '1' ? 'BASE_ORDER_IN_PROCESS' : 'BASE_ORDER_OUT_PROCESS'
      value = item.process
    }
  } else {
    code = 'REMARK_TYPE'
    value = item.marker
  }
  ;({ itemName: orderDetail.processName, itemColor: orderDetail.processColor } =
    await getCodeValueAndColor(code, value))
  orderDetail.inspectPics = [
    item.inspectNumberPics,
    item.inspectLoadPics,
    item.inspectOrderPics,
    item.inspectCommodityPics
  ]
    .filter((val) => val)
    .toString()
})

function cancel() {
  router.back()
}
</script>
<style lang="scss" scoped>
@import url('@/assets/style/mixins.scss');
.order-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
  overflow-y: auto;
  .container {
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ffffff;
    .title {
      font-weight: bold;
      font-size: 15.5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;
      .text {
        color: #666666;
        flex: 1;
        font-size: 14.5px;
      }
    }
  }
}
</style>
